<template>
	<view class="xiangcundaolan-page m-h100">
		<view class="flex flex-wrap p-2">
			<view v-for="(item,index) in dataList" :key="index" class="flex flex-column bgcolor1 p-1 rounded item"
				@click="navTo(item)">
				<image class="viewpic rounded" :src="item.main_img" mode="aspectFill"></image>
				<view class="fs-24 ftcolor1 my-1 text-ellipsis">{{item.title}}</view>
				<view class="fs-20 ftcolor4 flex align-center" v-if="item.address">
					<u-icon name="map" size="20"></u-icon>
					<text class="ml-1">{{item.address}}</text>
				</view>
			</view>
		</view>
		<view class="text-center py-3" v-if="this.tempList.length === 15"><text class="fs-24 ftcolor2"
				@click="clickMore">查看更多</text></view>
		<noneBox v-if="dataList.length === 0"></noneBox>
	</view>
</template>

<script>
	import serviceApi from '@/api/serviceApi.js'
	export default {
		data() {
			return {
				dataList: [],
				tempList: [],
				page: 1,
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.$route.query.title
			});
			if(this.$route.query.title === '乡村导览'){
				this.uni_xcdl()
			} else{
				this.uni_ycyp()
			}
			
		},
		methods: {
			uni_xcdl() {
				serviceApi.uni_xcdl({
					page: this.page,
					limit: 15
				}).then(res => {
					this.tempList = res.data
					if (this.page === 1) {
						this.dataList = res.data
					} else {
						this.dataList = this.dataList.concat(res.data)
					}
				})
			},
			uni_ycyp() {
				serviceApi.uni_ycyp({
					page: this.page,
					limit: 15
				}).then(res => {
					this.tempList = res.data
					if (this.page === 1) {
						this.dataList = res.data
					} else {
						this.dataList = this.dataList.concat(res.data)
					}
				})
			},
			clickMore() {
				if (this.tempList.length === 15) {
					this.page++
					if(this.$route.query.title === '乡村导览'){
						this.uni_xcdl()
					} else{
						this.uni_ycyp()
					}
				}
			},
			navTo(item){
				uni.setStorageSync('xiangcundaolandetails',item)
				uni.navigateTo({
					url: '/pages/service/xiangcundaolan-details?title=' + this.$route.query.title
				})
			}
		}
	}
</script>

<style lang="scss">
.xiangcundaolan-page{
	.item{
		width: 320rpx;
	}
	.viewpic{
		width: 300rpx;
		height: 188rpx;
	}
}
</style>
